<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>wyse-dummie</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
		<script type="text/javascript">
		    var cfg = {
		        webSocketUrl: 'ws://localhost/ws/Proxy',
		        founds: 100
		    };
		
		    var Sucket = {
		        conn: null,
		        connected: false,
		        id: null,
		        init: function(url){
		            if (!WebSocket) {
		                log('Yo browser SUX!');
		                return;
		            }
		            Sucket.conn = new WebSocket(url);
		            Sucket.conn.onopen = Sucket.onOpen;
		            Sucket.conn.onmessage = Sucket.onMessage;
		            Sucket.conn.onerror = Sucket.onError;
		            Sucket.conn.onclose = Sucket.onClose;
		        },
		        
		        onOpen: function(){
		            log('connected');
		            Sucket.connected = true;
			        Sucket.send({
			            action:'Hello',
			            params: {
							name:$('#inName').val(),
							founds:$('#inFounds').val(),
							sex:'M'}
						});
		        },
		        onMessage: function(msgEvent){
		            log('RX: '+msgEvent.data);
		            var parsed = JSON.parse(msgEvent.data.substr(msgEvent.data.indexOf('{')));
		            console.log(parsed);
		            if (parsed.action && parsed.action == 'Welcome')
		                Sucket.id = parsed.token;
		        },
		        onError: function(){
		            log('conn error');
		        },
		        onClose: function(){
		            Sucket.connected = false;
		            log('connection closed');
		        },
		        
		        send: function(obj){
		            if (!Sucket.connected)
		                return;
		            var msg = JSON.stringify(obj);
		            
		            /*var len = msg.length.toString(16);
		            len = (len.length<=2? '00' : '') + len;
		            len = (len.length<=3? '0' : '') + len;
		            msg = (Sucket.id||'00') + len + msg;*/
		            Sucket.conn.send(msg);
		            log('TX: '+msg);
		        },
		        
		        close: function(){
		            Sucket.conn.close();
		            log('closed connection');
		        }
		    };
		    
		    
		        
		    
            function log(msg) {
				var logEl = $('#debug');
				logEl.append('<p>'+msg+'</p>');
				logEl.scrollTop(100000000000000);
			}

			function r(max) {return Math.floor(Math.random()*max);}

			$(function(){
				$('#inName').val('dummie'+r(666));
				$('#inFounds').val(cfg.founds);
			
			
			    $('#btnConnect').click(function(e){
			        Sucket.init(cfg.webSocketUrl);
			    });
			    $('#btnDisconnect').click(function(e){
			        Sucket.close();
			    });
			    
			    
				$('#lBetMore').click(function(e){
					e.preventDefault();
					$('#inAmount').val(Math.floor(parseInt($('#inAmount').val())*2));
				});
				$('#lBetLess').click(function(e){
					e.preventDefault();
					$('#inAmount').val(Math.floor(parseInt($('#inAmount').val())/2));
				});
			    $('#btnBet').click(function(e){
			        Sucket.send({action:'Bet',params:{amount:$('#inAmount').val()}});
			    });
				
				
			    $('#btnFold').click(function(e){
			        Sucket.send({action:'Fold'});
			    });
				
				
			    $('#btnShow').click(function(e){
			        Sucket.send({action:'Show',params:{show:true}});
			    });
			    $('#btnMuck').click(function(e){
			        Sucket.send({action:'Show',params:{show:false}});
			    });
				
				
			    $('#btnShout').click(function(e){
			        Sucket.send({action:'Shout',params:{message:$('#inShout').val()}});
			    });
			    $('#btnProtest').click(function(e){
			        Sucket.send({action:'Protest',params:{message:$('#inProtest').val()}});
			    });
			});
			
			
		</script>
		<style>
			#debug {font-family: monospace;height:300px;overflow: auto;}
			#debug p {margin: 0;}
			.left {font-weight: bold;}
			.clear {clear:both;}
			#gameStateWrap, #actionsWrap, #automateWrap {float:left; width: 300px;margin-right: 20px;}
			#actionsWrap, #automateWrap {border-left: 1px solid #000; padding-left: 20px;width: 280px;}
			h3 {margin:0 0 20px 0;}
		</style>
	</head>
	<body>
		<div id="gameStateWrap">
			<h3>Game state</h3>
			<table border="0" width="100%">
				<tbody>
					<tr>
						<td class="left">Status</td>
						<td id="iGameState">offline</td>
					</tr>
					<tr>
						<td class="left">Player's turn</td>
						<td id="iGameState"></td>
					</tr>
					<tr>
						<td class="left">My money</td>
						<td id="iMoney"></td>
					</tr>
					<tr>
						<td class="left">My cards</td>
						<td id="iCards"></td>
					</tr>
					<tr>
						<td class="left">Players</td>
						<td id="iPlayers"></td>
					</tr>
				</tbody>
			</table>

		</div>
		<div id="actionsWrap">
			<h3>Commands</h3>
			Name: <input type="text" id="inName" style="width:80px;">
			Founds: <input type="text" id="inFounds" style="width:50px;" value="100">
			<button id="btnConnect">Connect</button>
			<button id="btnDisconnect">Disconnect</button>
			<br><br>
			<h3>Game</h3>
			<input type="text" id="inAmount" style="width:50px;" value="5">
			<a id="lBetMore" href="#">more</a> <a id="lBetLess" href="#">less</a>
			<button id="btnBet">Bet</button>
			<br>
			<button id="btnFold">Fold</button>
			<br>
			<button id="btnShow">Show</button> / <button id="btnMuck">Muck</button>
			<br>
			<br>
			<input type="text" id="inShout" value="Jest ostro!"> <button id="btnShout">Shout</button>
			<br>
			<input type="text" id="inProtest" value="Nie ma opierdalania się!"> <button id="btnProtest">Protest</button>
		</div>
		<div id="automateWrap">
			<h3>Automate</h3>
			<input type="checkbox" id="btnAutoFold"/> <label for="btnAutoFold">Always fold</label>
			<br>
			<input type="checkbox" id="btnAutoRise"/> <label for="btnAutoRise">Always rise random</label>
		</div>
		<div class="clear"></div>
		<div style="border-top: 1px solid #000;margin: 20px 0;"></div>
		<div id="debug"></div>
	</body>
</html>
